<template>
    <view class="container">
        <!-- 商品信息 -->
        <view class="product-info">
            <image class="product-image" src="https://pic.imgdb.cn/item/66b8ba78d9c307b7e99fad5f.png" />
            <view class="product-details">
                <text class="product-name">姑苏天子笑</text>
                <text class="product-price">￥75.'00'</text>
                <text class="product-type">类型: 酒水 1000g</text>
                <text class="product-quantity">x1</text>
            </view>
        </view>

        <!-- 收货地址 -->
        <view class="address-info">
            <view class="address-label">收货地址</view>
            <view class="address-details">
                <text class="address-name">堕卡卡卡</text>
                <text class="address-phone">1828594862</text>
                <text class="address-location">黑龙江省哈尔滨市道里区</text>
            </view>
        </view>

        <!-- 支付方式 -->
        <view class="payment-method">
            <view class="payment-label">支付方式</view>
            <view class="payment-option">
                <image class="payment-icon" src="/static/images/alipay.png" />
                <text class="payment-text">支付宝支付</text>
                <view class="payment-selected"></view>
                <!-- 对号图标 -->
            </view>
        </view>

        <!-- 底部支付按钮 -->
        <view class="footer">
            <view class="total-price">合计: ￥75.'00'</view>
            <button class="pay-button" @tap="confirmPayment">确认支付</button>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
export default {
    data() {
        return {
            productName: '姑苏天子笑',
            productPrice: 75,
            productType: '酒水',
            productQuantity: 1,
            addressName: '堕卡卡卡',
            addressPhone: '1828594862',
            addressLocation: '黑龙江省哈尔滨市道里区',
            paymentMethod: '支付宝支付'
        };
    },
    methods: {
        confirmPayment() {
            // 处理支付逻辑，可以接入支付宝支付的API
            uni.alert({
                title: '支付成功',
                content: '您的订单已成功支付。'
            });
        }
    }
};
</script>
<style>
.container {
    padding: 20rpx;
}

.product-info {
    display: flex;
    margin-bottom: 20rpx;
}

.product-image {
    width: 150rpx;
    height: 150rpx;
}

.product-details {
    flex: 1;
    padding-left: 20rpx;
}

.product-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 10px;
}

.product-price {
    color: red;
    font-size: 32rpx;
    margin-top: 20rpx;
    margin-left: 80px;
}

.product-type,
.product-quantity {
    font-size: 28rpx;
    margin-top: 10rpx;
    display: block;
}

.address-info,
.payment-method {
    margin-bottom: 20rpx;
}

.address-label,
.payment-label {
    font-size: 32rpx;
    margin-bottom: 10rpx;
}

.address-details,
.payment-option {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 10rpx;
}

.payment-option {
    display: flex;
    align-items: center;
}

.payment-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
}

.payment-text {
    flex: 1;
    font-size: 32rpx;
}

.payment-selected {
    font-size: 32rpx;
    color: green;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1rpx solid #ccc;
    position: absolute;
    top: 650px;
}

.total-price {
    font-size: 36rpx;
    color: red;
}

.pay-button {
    background-color: #d43f3a;
    color: white;
    font-size: 32rpx;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    margin-left: 160px;
}

.address-name,
.address-phone,
.address-location {
    display: block;
}

</style>
